<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/jquery-kq-pop-box.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/jquery-kq-pop-box.js"></script>
</head>

<body>
    <button class="pop-box-btn">弹出提示窗</button>
    <div class="pop-box-bg">
        <div class="pop-box animated">
            <img class="pop-box-ico" src="images/ico.png" alt="" />
            <div class="pop-box-top">
                <a href="javascript:;" class="close-pop-box">关闭</a>
            </div>
            <div class="pop-box-bottom">
                <ul class="editInfos">
                    <li><label><span style="color:red">* </span>昵称：<input type="text" name="" required value="" class="ipt" /></label></li>
                    <li><label><span style="color:red">* </span>手机：<input type="text" name="" required value="" class="ipt" /></label></li>
                    <li><label><span style="color:red">* </span>地址：<input type="text" name="" required value="" class="ipt" /></label></li>
                    <li><input type="submit" value="确认提交" class="submitBtn" /></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        let content = "kkkkkk";
        // 动画参考：https://daneden.github.io/animate.css/
        //动画参考：http://www.jq22.com/yanshi10489   的 css动画
        // 往前弹一下， 再缩一下， 再复原: bounceIn
        // 上下摆动效果: flipInX
        // 左边滚进效果: rollIn
        // 从上往下跳: bounceInDown
        $(".pop-box-btn").on('click', function() {
            $.popBoxAlready('bounceIn');
        })
    </script>

</body>

</html>